import { ITodoData } from '../../typings';
import Input, { IInputOptions } from './Subs/Input';
import List from './Subs/List';

class TodoList {
  private _el: HTMLElement;
  private _todoData: ITodoData[];
  private _input: Input;
  private _list: List;
  private _todoWrapper: HTMLElement;

  constructor(el: HTMLElement, todoData: ITodoData[]) {
    this._el = el;
    this._todoData = todoData;
    this._todoWrapper = document.createElement('div');

    // console.log(this._el, this._todoData);
    //<div id="app"></div> [{},{},{}]
  }

  public init() {
    this._createComponents();
    this._render();
    this._bindEvent();
  }

  //创建实例化子组件的函数
  private _createComponents() {
    this._input = new Input(<IInputOptions>{
      wrapperEl: this._todoWrapper,
      placeholderText: '请输入',
      buttonText: '增加'
    });
    this._list = new List({
      todoData: this._todoData,
      wrapperEl: this._todoWrapper
    });
  }

  //管理子组件的渲染
  private _render() {
    //新增Input组件内容
    this._input.render();

    //新增List组件内容
    this._list.render();

    //渲染挂载todoList容器
    this._el.appendChild(this._todoWrapper);
  }

  //管理子组件的事件绑定
  private _bindEvent() {
    this._input.bindEvent();
    this._list.bindEvent();
  }
}

export default TodoList;
